import React, { Component } from 'react'
import {nanoid} from 'nanoid'
import {connect} from 'react-redux'
import { createAddPersonAction } from '../../redux/actions/person'

class Person extends Component {
  addPerson=() => {
    const name = this.name.value
    const age = this.age.value
    const personObj ={id:nanoid(),name,age}
    this.props.incrementPerson(personObj)
    this.name.value=''
    this.age.value=''
  }
  render() {
    return (
      <div>
        <h2>我是Person组件，上面的和为：{this.props.he}</h2>
        <input ref={c =>{ this.name = c }} type="text" placeholder="输入名字" />
        <input ref={c =>{ this.age = c }} type="text" placeholder="输入年龄" />
        <button onClick={this.addPerson} >添加</button>
        <ul>
          {
            this.props.personInfo.map( item =>{
              return <li key={item.id}> 姓名：{item.name}--年龄：{item.age} </li>
            } )
          }
        </ul>
      </div>
    )
  }
}

export default connect(
  state =>({personInfo:state.rens,he:state.he}),
  {incrementPerson:createAddPersonAction}
)(Person)

